<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<base href="<%=basePath%>" />

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>资源列表</title>
		<style type="text/css">
<!--

#bigbig {
	background: #ccc;
	margin: 0;
	padding: 0;
	text-align: center;
	padding: 10px;
}

#big {
	background: #fff;
	width: 900px;
	border: 1px solid #000;
	text-align: center;
	padding-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

#list {
	width: 700px;
	height: 100px;
	overflow: hidden;
	border: 1px solid #000;
	float: left;
}

.fang {
	float: left;
	width: 20px;
	height: 100px;
}

#innerdiv {
	margin-top: 17px;
	position: relative;
	left: 10px;
	float: left;
}

.listpic {
	border: 2px solid #fff;
}

#outlist {
	height: 120px;
}

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

a:hover {
	color: #eee;
}

a img {
	border: 0;
}

.STYLE1 {
	font-size: 13px;
	color: #000;
}

.STYLE3 {
	font-size: 12px;
	font-weight: bold;
}

.STYLE4 {
	font-size: 12px;
}

.td_bg {
	font-size: 13px;
	background: #fff;
	border: 1px solid #6495ED;
}

/*表单项的字体格式*/
.td_x_bg {
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	background: #BDE3FB;
	height: 40px;
	border: 1px solid #6495ED;
}

.td_x_bg1 {
	font-size: 13px;
	font-weight: bold;
	text-align: left;
	background: #BDE3FB;
	height: 40px;
	border: 1px solid #6495ED;
}

.td_x_bg1_font {
	font-size: 13px;
}

.table {
	margin-top: 10px;
}
-->
</style>
		
		
		<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
		<script language="javascript" src="js/tdColor.js"></script>

		<script>
	var pics = new Array(); 
	var xxx = 0;
	<s:iterator value="photoListThumb" var="photoListThumb" status="status" >
		pics[xxx] = 'photo/<s:property value="#photoListThumb.photoName" />';
		
		//alert(pics[xxx]);
		xxx++;
	</s:iterator>
	var i = 0;
	var top = pics.length;
	function next() {
		i++;
		if(i < top) {
			document.getElementById('pic').src = pics[i];
		}
		else {
			alert('已到达最后一张!');
			i--;
		}
	}

	function last() {
		i--;
		if(i >= 0) {
			document.getElementById('pic').src = pics[i];
		}
		else {
			alert('已到达第一张!');
			i++;
		}
	}
	var ii = 10;
	function left() {
		ii = ii + 180;
		if(ii > 0) {
			ii=10;
			document.getElementById('innerdiv').style.left = '10px';
		}else {
			document.getElementById('innerdiv').style.left = ii + 'px';
		}
	}
	
	function right() {
		ii = ii - 180;
		if((ii - 700) < -($('#innerdiv').width())){
			document.getElementById('innerdiv').style.left = ii + 'px';
			ii = ii + 180;
		}else {
			document.getElementById('innerdiv').style.left = ii + 'px';
		}		
	}

	function change(picsrc) {
		document.getElementById('pic').src = picsrc.src;
		var re;
		for(var na = 0;na < pics.length;na++) {
			re = new RegExp('/' + pics[na]);
			if(picsrc.src.search(re)!= -1) {
				i = na;	
				break;
			}
			
		}
	}

	function changecolor(duixiang)  {
		duixiang.style.borderColor = '#bD9A82';
	}

	function changeback(duixiang) {
		duixiang.style.borderColor = '#fff';
	}
  </script>

	</head>

	<body>
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td height="30" background="images/main/tab_05.gif">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td width="12" height="30">
								<img src="images/main/tab_03.gif" width="12" height="30" />
							</td>
							<td>
								<table width="100%" border="0" cellspacing="0" cellpadding="0">
									<tr>
										<td width="46%" valign="middle">
											<table width="100%" border="0" cellspacing="0"
												cellpadding="0">
												<tr>
													<td width="5%">
														<div align="center">
															<img src="images/main/tb.gif" width="16" height="16" />
														</div>
													</td>
													<td width="95%" class="STYLE1">
														<span class="STYLE3">你当前的位置</span>：[团队相册]-[照片欣赏]
													</td>
												</tr>
											</table>
										</td>
										<td width="54%">
											<table border="0" align="right" cellpadding="0"
												cellspacing="0">
												<tr>
													<td width="80">
														
													</td>
													<td width="60">
														<table width="90%" border="0" cellpadding="0"
															cellspacing="0">
															<tr>
																<td class="STYLE1"></td>
																<td class="STYLE1"></td>
															</tr>
														</table>
													</td>

												</tr>
											</table>
										</td>
									</tr>
								</table>
							</td>
							<td width="16">
								<img src="images/main/tab_07.gif" width="16" height="30" />
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td width="8" background="images/main/tab_12.gif">
								&nbsp;
							</td>
							<td>
								&nbsp;
							</td>
							<td>
								
								
	<div id="bigbig">
		<div id="big">
			<div id="outlist" > 
				<input class="fang" type="button" value="<" style="margin-left:80px;" onclick="left()" />
				<div id="list" nowrap>
					<div id="innerdiv" nowrap>
						<nobr>
							<s:iterator value="photoListThumb" var="photoListThumb">
								<img class="listpic" src="photo/<s:property value="#photoListThumb.photoName" />" onclick="change(this)" onmouseover="changecolor(this)"  onmouseout="changeback(this)" width="80" height="70" />
							</s:iterator>
						</nobr>
					</div>
				</div>
					<input class="fang" type="button" value=">" onclick="right()" />
			</div>
			<div >
				<div style="text-align:center">
					<input type="button" value="上一张" onclick="last()" />
					<input type="button" value="下一张" onclick="next()" />
				</div>
				<img id="pic" src="photo\<s:property value="photoListThumb[0].photoName" />" width="700" height="400"/>
		<!-- 
				<s:iterator value="photoList" var="photoList">
					<img id="pic" src="photo/<s:property value="#photoListThumb.photoName" />" width="700"/>
				</s:iterator>
		 -->
				
			</div>
		</div>
	</div>
									
						
								
							</td>
							<td width="8" background="images/main/tab_15.gif">
								&nbsp;
							</td>
						</tr>
				</table>
			</td>
		</tr>
		<tr>
				<td height="35" background="images/main/tab_19.gif">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td width="12" height="35">
								<img src="images/main/tab_18.gif" width="12" height="35" />
							</td>
							<td>
								
							</td>
							<td width="16">
								<img src="images/main/tab_20.gif" width="16" height="35" />
							</td>
						</tr>
					</table>
				</td>
			</tr>
	</table>
	
	</body>
</html>
